<template>
    <div class="con">
        <img src="../assets/images/logo.png" class="logo" alt="" onclick="return false">
        <div class="bg">
            <img src="../assets/images/rankingwood.png" alt="" onclick="return false">
            <div class="list">
                <ul>
                    <li class="topLeft"><img src="../assets/images/1.png" alt="" onclick="return false"></li>
                    <li><img src="../assets/images/2.png" alt="" onclick="return false"></li>
                    <li class="topRight"><img src="../assets/images/3.png" alt="" onclick="return false"></li>
                </ul>
                <ul v-for="item,index in rankinglist">
                    <li>{{index+1}}</li>
                    <li>{{item.nickname}}</li>
                    <li>{{item.point}}</li>
                </ul> 
     
            </div>  
        </div>
        <div class="wood" v-for="item in rankinglist">
            <img src="../assets/images/wood.png" alt="" onclick="return false">
        </div>  
 
        
        
    </div>
</template>

<script>
export default {
    name: "myPoints",
    data() {
        return {
            rankinglist: []
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].className = "bg_MyPoints";
    },
    mounted: function() {
        var qs = require("qs");
        this.axios({
            method: "post",
            url: `${this.siteUrl}/piaowu/api/point_rank`,
            data: qs.stringify({
                member_id: $.cookie("osc_member_id"),
                token: $.cookie("osc_member_token")
            })
        })
            .then(response => {
                if (response.data.status == 1) {
                    this.rankinglist = response.data.data;
             
                } else {
                    alert("请求失败：" + response.data.msg);
                }
            })
            .catch(function(error) {
                console.log(error);
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    text-align: center;
}
.con img {
    width: 90%;
}
.con .logo {
    width: 34%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 30%);
}

.con .wood {
    margin-top: -10px;
}

.con .bg {
    position: relative;
}

.con .list {
    width: 80%;
    position: absolute;
    top: 80%;
    left: 9%;
    box-shadow: 2px 10px 15px 0px #000;
}

.con .list img {
    width: 50%;
    padding-top: 10px;
}
.con .list li {
    width: 33.33%;
    float: left;
    height: 12vw;
    border-right: 1px solid #595355;
    border-bottom: 1px solid #595355;
    box-sizing: border-box;
    line-height: 12vw;
}

.con .list li:first-child {
    background: #f9c7dd;
}
.con .list li:nth-child(2) {
    background: #fff;
}
.con .list li:last-child {
    background: #fdc172;
}

.con .topLeft {
    border-top-left-radius: 10px;
}
.con .topRight {
    border-top-right-radius: 10px;
}
</style>
